<template>
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>省分组分项检查统计</el-breadcrumb-item>
  </el-breadcrumb>
  <el-alert
    title="省分组分项检查统计"
    type="success"
    effect="dark"
    :closable="false"
    style="width: 80%; margin: 20px 0"
  />
  <!-- 堆叠柱状图展示 -->
  <div class="chart-box">
    <v-chart :option="barOption" autoresize style="height: 400px;" />
  </div>
  <div class="table-box">
    <el-table
      :data="provinceItemTotalArr"
      :cell-style="{ padding: '4px' }"
      empty-text="无数据"
      style="width: 100%"
    >
      <el-table-column prop="provinceId" label="省编号" width="90" />
      <el-table-column prop="provinceAbbr" label="省简称" />
      <el-table-column prop="provinceName" label="省名称" />
      <el-table-column prop="so2Total" label="SO2超标累计" />
      <el-table-column prop="coTotal" label="CO超标累计" />
      <el-table-column prop="spmTotal" label="PM2.5超标累计" />
      <el-table-column prop="aqiTotal" label="AQI超标累计" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, inject, computed } from "vue";
import { use } from "echarts/core";
import VChart from "vue-echarts";
import { BarChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

use([BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, CanvasRenderer]);

const axios = inject("axios");

const provinceItemTotalArr = ref([]);

const barOption = computed(() => ({
  title: {
    text: "各省分项超标累计堆叠柱状图",
    left: "center"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "shadow" }
  },
  legend: {
    top: 30
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: provinceItemTotalArr.value.map(item => item.provinceAbbr || item.provinceName)
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "SO2超标累计",
      type: "bar",
      stack: "total",
      emphasis: { focus: "series" },
      data: provinceItemTotalArr.value.map(item => item.so2Total),
      itemStyle: { color: "#4fc3f7" }
    },
    {
      name: "CO超标累计",
      type: "bar",
      stack: "total",
      emphasis: { focus: "series" },
      data: provinceItemTotalArr.value.map(item => item.coTotal),
      itemStyle: { color: "#81c784" }
    },
    {
      name: "PM2.5超标累计",
      type: "bar",
      stack: "total",
      emphasis: { focus: "series" },
      data: provinceItemTotalArr.value.map(item => item.spmTotal),
      itemStyle: { color: "#ffd54f" }
    },
    {
      name: "AQI超标累计",
      type: "bar",
      stack: "total",
      emphasis: { focus: "series" },
      data: provinceItemTotalArr.value.map(item => item.aqiTotal),
      itemStyle: { color: "#e57373" }
    }
  ]
}));

const init = () => {
  axios
    .post("statistics/listProvinceItemTotalStatis")
    .then((response) => {
      provinceItemTotalArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>

<style scoped>
.chart-box {
  width: 80%;
  margin: 20px 0 0 0px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 20px 0;
}
.table-box {
  width: 80%;
  height: 450px;
  overflow: auto;
  margin-top: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #f0f1f2;
  padding-bottom: 20px;
}
</style>